<template>
  <div class="page">
    <div class="coupon weui-flex">
      <img class="coupon_bg" src="../../../static/images/archbg.png" mode="widthFix">
      <div class="coupon_value" >
        <div class="coupon_number" v-if="data.ticketDef.ticketType==1">{{data.ticketDef.discount}}</div>
        <div class="coupon_number" v-if="data.ticketDef.ticketType==0">{{data.ticketDef.description}}</div>
        <div class="spec" v-if="data.ticketDef.ticketType==1">折</div>
        <div class="spec" v-if="data.ticketDef.ticketType==0">元</div>
      </div>
      <div class="weui-flex__item coupon_info">
        <div class="coupon_title">{{data.ticketDef.ticketName}}</div>
        <div class="weui-flex">
          <div class="weui-flex__item coupon_condition" v-if="data.ticketDef.leastCost">满{{data.ticketDef.leastCost*0.01}}元使用</div>
          <div class="weui-flex__item coupon_condition" v-else></div>
          <a class="usebtn" @click="userPon(data)">去使用</a>
        </div>
        <div class="coupon_data">{{data.begin}} 至 {{data.end}}</div>
      </div>
    </div>
    <div class="card">
      <div class="weui-flex">
        <div class="c_label">可用时短：</div>
        <div class="weui-flex__item" v-if="data.ticketDef.validPeriod!=-1">{{data.ticketDef.validPeriod}}天</div>
        <div class="weui-flex__item" v-else>永久有效</div>
      </div>
      <div class="weui-flex">
        <div class="c_label">适用门店：</div>
        <div class="weui-flex__item">{{data.ticketDef.ticketRange||'所有门店'}}</div>
      </div>
      <div class="weui-flex">
        <div class="c_label">使用场景：</div>
        <div class="weui-flex__item">{{data.use_scenes}}</div>
      </div>
      <div class="weui-flex">
        <div class="c_label">适用产品：</div>
        <div class="weui-flex__item">{{data.ticketDef.productRange}}</div>
      </div>
      <div class="weui-flex">
        <div class="c_label">适用须知：</div>
        <div class="weui-flex__item">{{data.ticketDef.notice}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as appId from "@/utils/util"
export default {
  data () {
    return {
      current: 0,
      data:{},
      userInfo:{},
      phone:"",
      use_scenes:[{
        name:"全店通用",
        value:0
      },{
        name:"线上专享",
        value:1
      },{
        name:"店内使用",
        value:2
      }]
    }
  },
  onLoad(options){
    this.data=JSON.parse(options.data);

      this.data.use_scenes=this.use_scenes.filter((item)=>{
      return item.value==this.data.ticketDef.useScenes
    })[0].name;
  },
  onShow(){
    wx.setNavigationBarTitle({
      title: "优惠券详情"
    })
    this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
    if(this.userInfo){
      this.phone=this.userInfo.mobileNo;

    }else{
      wx.showToast({
        title: '请登录',
        icon: 'none',
        duration: 2000
      })
    }
  },
  methods: {
    userPon(item){//去使用
      let that=this;
      this.$http.request({
        method: "post",
        url: "/v1.0/appletOperat/appletOperatReCou",
        body: {
          "userId":this.userInfo.baseUserId,
          "phone":that.phone,
          "productId":item.ticketDef.id,
          "appid":appId.appId

        },
      }).then((data)=>{
        if(data.code==0){
          wx.showToast({
            title:"领取成功",
            icon: 'success',
            duration: 2000
          })

        }else{

          wx.showToast({
            title: `${data.message}`,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.coupon{
  position: relative;
  margin: 0.8em 0.8em 0em 0.8em;
}
.coupon_bg{
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
.coupon_value{
  width: 33.3333%;
  text-align: center;
  position: relative;
}
.coupon_value .coupon_number{
  position: absolute;
  width: 100%;
  height: 2em;
  line-height: 2em;
  top: 50%;
  margin-top: -1em;
  left: 0px;
  color: #fff;
  font-size: 1em;
}
.coupon_value .spec{
  position: absolute;
  top: 0px;
  right: 0px;
  background: #FF787E;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  line-height: 1.4em;
  font-size: 0.8em;
  text-align: center;
  border: 1px #fff solid;
  color: #fff;
}
.coupon_info{
  position: relative;
  z-index: 99;
  padding: 0.6em;
}
.coupon_info .coupon_title{
  color: #333;
  font-size: 0.9em;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}
.coupon_info .coupon_condition{
  font-size: 0.8em;
  color: #FF787E;
}
.coupon_info .usebtn{
  width: 4.6em;
  height: 1.6em;
  color: #FF787E;
  border: 1px #FF787E solid;
  display: block;
  border-radius: 0.8em;
  line-height: 1.6em;
  text-align: center;
  font-size: 0.8em;
}
.coupon_info .usebtn_used{
  border: 1px #aaa solid;
  color: #999;
}
.coupon_data{
  font-size: 0.7em;
  color: #999;
  margin-top: 0.3em;
}
.card{
  background: #fff;
  margin: 0.8em;
  border-radius: 0.3em;
  box-shadow: 0px 0px 0.5em #eee;
  padding: 0.6em;
  font-size: 0.8em;
}
.card .c_label{
  color: #999;
}
</style>
